import React, { useState,useCallback } from "react";


export default function Callback () {
  const [input, setInput] = useState('')

  const changeInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value)
  }, [])

  const [user, setUser] = useState({
    name: 'pipi',
    age: 18,
  })
  // 函数重新渲染 导致子组件重新渲染
  // const callback = () => {
  //   console.log('callback');
    
  // }
  // 解决
  const callback = useCallback(() => {
    console.log('callback');
    
  }, [])
  return (
    <>
      <h1>useCallback</h1>
      <input type="text" value={input} onChange={changeInput} />
      <hr />
      <Child user={user} callback={callback} />
    </>
  )

}

const Child = React.memo((props) => {
  console.log('子组件render');
  return (
    <>
      <h1>child</h1>
      <div>{props.user.name}</div>
      <div>{props.user.age}</div>
      <button onClick={props.callback}>点击</button>
    </>
  )
})